<!--  -->
<template>
  <div class='list-page'>
    <van-nav-bar title="账单列表" />
    <div class="content">
      <div class="more">
        <div class="search">
          <!-- 每个元素的两侧间隔相等 -->
          <van-form>
            <van-row type="flex" justify="space-around">
              <van-col span="10">
                <van-field readonly clickable name="picker" :value="user.value" placeholder="选择用户" @click="user.showPicker = true" />
                <van-popup v-model="user.showPicker" position="bottom">
                  <van-picker show-toolbar :columns="user.columns" @confirm="onConfirmUser" @cancel="user.showPicker = false">
                    <template #option="option">
                      <div style="display: flex; flex-direction: column; align-items: center;">
                        <div>{{ option.nickName }}</div>
                      </div>
                    </template>
                  </van-picker>
                </van-popup>
              </van-col>
              <van-col span="10">
                <van-field readonly clickable name="datetimePicker" :value="times.value" placeholder="选择日期" @click="times.showPicker = true" />
                <van-popup v-model="times.showPicker" position="bottom">
                  <van-datetime-picker type="year-month" :min-date="times.minDate" :max-date="times.maxDate" title="选择年月" @confirm="onConfirmTimes" :formatter="formatter" @cancel="times.showPicker = false" />
                </van-popup>
              </van-col>
            </van-row>
            <div class="btnGroup">
              <van-row type="flex" justify="space-around">
                <van-col span="10">
                  <van-button size="small" round block plain type="info" @click="$router.go(0)"> 刷 新 </van-button>
                </van-col>
                <van-col span="10">
                  <van-button size="small" round block plain type="primary" @click="getList"> 搜 索 </van-button>
                </van-col>
              </van-row>
            </div>
          </van-form>
        </div>
      </div>
      <div class="more">
        <div class="box">
          <van-empty v-if="bills.length<=0" description="暂无数据" />
          <div class="item" v-for="(item,i) in bills" :key="i">
            <div class="itemm">
              <van-image round fit="cover" :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.email+'&spec=100'" />
              <div class="name">{{item.nickName}}</div>
              <div class="time">{{item.creatTime}}</div>
              <div class="num">￥{{item.money}}</div>
            </div>
            <div class="remark">备注：{{item.remark}}</div>
          </div>
        </div>
      </div>
      <div class="more" v-if="bills.length>0">
        <van-pagination v-model="queryParams.pageNum" force-ellipses :total-items="total" :items-per-page="queryParams.pageSize" :show-page-size="5" @change="getList">
          <template #prev-text>
            <van-icon name="arrow-left" />
          </template>
          <template #next-text>
            <van-icon name="arrow" />
          </template>
          <template #page="{ text }">{{ text }}</template>
        </van-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { list, listAll } from '@/api/list'
export default {
  name: 'ListPage',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      user: {
        value: '',
        showPicker: false,
        columns: []
      },
      times: {
        value: '',
        showPicker: false,
        minDate: new Date(2022, 5, 1),
        maxDate: new Date(2025, 11, 1)
      },
      bills: [],
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        userId: null,
        year: null,
        month: null
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    test (obj) {
      return obj.nickName
    },
    onConfirmUser (value, i) {
      this.user.value = this.user.columns[i].nickName
      this.queryParams.userId = this.user.columns[i].userId
      this.user.showPicker = false
    },
    onConfirmTimes (time) {
      this.times.value = this.$moment(time).format('YYYY-M')
      this.queryParams.year = this.$moment(time).format('YYYY')
      this.queryParams.month = this.$moment(time).format('M')
      this.times.showPicker = false
    },
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },
    async getList () {
      const [, res] = await list(this.queryParams)
      this.bills = res.rows
      this.total = res.total
    },
    async getUser () {
      const [, res] = await listAll()
      this.user.columns = res.data
      console.log(res)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.getList()
    this.getUser()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="less">
.list-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  overflow-x: hidden;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 15px;
  .more {
    margin: 0 10px;
    background-color: #fff;
    border-radius: 10px;
    margin-top: 15px;
    .box {
      padding: 10px;
      .item {
        border-radius: 10px;
        background-color: rgba(0, 0, 0, 0.03);
        margin-bottom: 10px;
        .itemm {
          padding: 5px 5px;
          display: flex;
          align-items: center;
          .van-image {
            width: 40px;
            height: 40px;
            position: relative;
            top: 15px;
          }
          .name {
            font-size: 20px;
            font-weight: normal;
            margin-left: 15px;
            flex: 1;
          }
          .time {
            flex: 1;
          }
          .num {
            width: 100px;
            text-align: right;
          }
        }
        .remark {
          padding: 0 0 5px 60px;
          font-size: 10px;
        }
      }
    }
  }
  .search {
    padding: 10px 15px;
    margin: 0;
  }
  .btnGroup {
    margin-top: 10px;
  }
  .listBox {
    height: 380px;
  }
}
</style>
